<script lang="ts" setup>
  import { ref, onMounted } from 'vue';

  import { useBScroll } from '@/hooks';
  import { cityService } from '@/services';
  import { cities } from '@/assets/data';
  import type { ICity } from '@/types/data';

  import CurrentCity from './City/Current.vue';
  import CityList from './City/List.vue';

  defineOptions({
    name: 'CityScrollWrapper'
  });

  const { wrapperRef } = useBScroll();

  const cityList = ref<ICity[]>([]);

  onMounted(() => {
    cityService.getCityList()
      .then(res => {
        cityList.value = res.data.map(item => {
          const { name, aliasName } = item;
          return {
            cityId: name,
            cityName: aliasName
          };
        });
      })
      .catch(err => {
        cityList.value = [...cities];
      })
  });
</script>

<template>
  <div class="scroll-wrapper" ref="wrapperRef">
    <div class="scroll-conetent">
      <current-city />
      <city-list :list="cityList" />
    </div>
  </div>
</template>
